<template>
	<view class="talent-list">
		<view class="talent-item" v-for="item in list" :key="item.user_id" @click="navigateToDetail(item.user_id)">
			<view class="talent-user">
				<view class="talent-userl">
					<image :src="item.user_headimg" mode="scaleToFill"></image>
				</view>
				<view class="talent-userr">
					<view class="talent-name">{{ item.user_nickname }}</view>
					<view class="talent-data">
						<view class="talent-dataitem">
							<image src="../../static/images/icon-img.png" mode="widthFix"></image>
							{{ item.img_num }}
						</view>
						<view class="talent-dataitem">
							<image src="../../static/images/icon-love.png" mode="widthFix"></image>
							{{ item.user_zan  }}
						</view>
						<view class="talent-dataitem">
							<image src="../../static/images/icon-fav.png" mode="widthFix"></image>
							{{ item.user_collection }}
						</view>
					</view>
				</view>
			</view>
			<view class="talent-thumbs label-rel">
				<image :src="citem.img" mode="scaleToFit" :style="{height: (windowWidth-20)*.32 + 'px'}" v-for="citem in item.img" :key="citem.id"></image>
				<view class="label-gif" v-if="item.is_gif === 1">GIF</view>
			</view>
		</view>
		<text class="loading">{{ loadOver ? '已加载全部数据～' : '数据加载中...' }}</text>
	</view>
</template>

<script>
	import config from '../../utils/config.js';
	import request from '../../utils/request.js';
	import utils from '../../utils/utils.js';
	export default {
		data() {
			return {
				windowWidth: utils.systemInfo().windowWidth,
				list: [],
				isLoading: false,
				loadOver: false,
				page: 1,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			async getData() {
				this.isLoading = true;
				const r = await request({
					url: `${config.API}api/w/index/expertList`,
					method: 'post',
					data: {
						page: this.page
					}
				});
				this.isLoading = false;
				if (r.error_code === 0) {
					this.list = [...this.list, ...r.data.list.data];
					if (r.data.list.current_page >= r.data.list.last_page) {
						this.loadOver = true;
					}
				}
			},
			loadMore() {
				this.page ++;
				this.getData();
			},
			/**
			 * 跳转详情
			 * @param {number} userId 用户id
			 */
			navigateToDetail(userId) {
				uni.navigateTo({
					url: '/pages/talent/detail?id=' + userId
				});
			}
		},
		onReachBottom() {
			if (this.isLoading || this.loadOver) return;
			this.isLoading = true;
			this.loadMore();
		},
	}
</script>
<style>
	page {
		background-color: #2C2860;
	}
</style>

<style lang="scss" scoped>
.talent-list {
	padding: 20rpx;
}
.talent-item {
	margin-top: 50rpx;
	background-color: #161430;
	color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
}
.talent-user {
	display: flex;
	align-items: center;
	.talent-userl {
		flex-shrink: 0;
		border: 1px solid #fff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.talent-userr{
		flex: 1;
		margin-left: 20rpx;
	}
	.talent-name {
		font-size: 28rpx;
	}
	.talent-data {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 15rpx;
	}
	.talent-dataitem {
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		image {
			display: block;
			width: 30rpx;
			margin-right: 10rpx;
		}
	}
}
.talent-thumbs  {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 30rpx;
	&:after {
		content: '';
		width: 32%;
		height: 0;
	}
	image {
		display: block;
		width: 32%;
		border-radius: 8rpx;
	}
	.label-gif {
		border-bottom-right-radius: 20rpx;
	}
}
</style>
